<template>
  <div id="HistorGam" style="width: 100%; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    var chartDom = document.getElementById('HistorGam');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: [
        { type: 'value', name: 'Value1' }, // 左边y轴，表示柱状图的值
        { type: 'value', name: 'Value2', position: 'right' } // 右边y轴，表示折线图的值
      ],
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          itemStyle: {
            color: 'rgba(255,165,0,0.7)' // 橘色
          },
          label: {
            show: true,
            position: 'inside'
          }
        },
        {
          data: [30, 50, 40, 60, 45, 70, 55],
          type: 'line',
          yAxisIndex: 1, // 使用右边y轴
          symbol: 'circle',
          lineStyle: {
            color: 'blue'
          },
          itemStyle: {
            color: 'blue'
          }
        }
      ]
    };

    option && myChart.setOption(option);
  }
};
</script>

<style>

</style>
